import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Form, Icon, Input, Button, Select, Alert, Row, Col } from 'antd';
import { connect } from 'dva';
const { TextArea } = Input;
const { Option } = Select;

class Perform extends React.Component {
  handleSubmit = e => {
    const { dispatch, close, view } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        close();
        dispatch({
          type: 'person/put',
          payload: {
            ...view,
            ...values,
          },
        });
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { view } = this.props;
    console.log(view, 88888);
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
    };
    const formTailLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 8, offset: 4 },
    };
    return (
      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
        <Form.Item label={'姓名:'}>
          {getFieldDecorator('name', {
            rules: [{ required: true, message: '请输入姓名' }],
            initialValue: view.name,
          })(<Input placeholder="请输入姓名" />)}
        </Form.Item>
        <Form.Item label={'电话号码：'}>
          {getFieldDecorator('phoneNumber', {
            rules: [{ required: true, message: '请输入电话号码' }],
            initialValue: view.phoneNumber,
          })(<Input placeholder="请输入电话号码" />)}
        </Form.Item>
        <Form.Item label={'备注'}>
          {getFieldDecorator('comments', {
            rules: [],
            initialValue: view.comments,
          })(<TextArea rows={4} placeholder="请输入描述性信息" />)}
        </Form.Item>
      </Form>
    );
  }
}

export default connect(({ person }) => ({ view: person.view }))(Form.create()(Perform));
